<template>
  <div>
    <el-container class="container">
      <el-aside style="width: auto">
        <my-aside/>
      </el-aside>
      <el-container>
        <el-header>
          <my-header/>
        </el-header>
        <el-main>
          <div>
            <my-tabs/>
          </div>
          <div class="main">
            <router-view/>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import MyAside from './components/MyAside.vue'
import MyHeader from './components/MyHeader.vue'
import MyTabs from './components/MyTabs.vue'
export default {
  components: {
    MyAside,
    MyHeader,
    MyTabs
  }
}
</script>

<style
Aside lang="scss" scoped>
.el-aside{
  background: #303030;
}
.el-header{
  background-color: #fff;
}
.el-main{
  background-color: #f0f2f5;
  padding: 0;
  .main{
    padding: 20px;
  }
}
.container{
  height: 100vh;
}
</style>
